import React, { useEffect, useMemo, useState } from "react";
import MdEasyCom from ".././MdCom/EasyCom";
import FCSpreadAttributes from "./ChidCom/TypeDemo";
import { Button, Card } from "antd";
interface PaginProps {
  postsPerPage: number;
  totalPosts: string;
  paginate: (arg: string | number) => void;
}
const MyComponentFC: React.FC<PaginProps> = (prop: PaginProps) => {
  const { postsPerPage, totalPosts, paginate } = prop;
  function atr(prop: any) {
    console.log("只有totalPosts被初次赋值和修改后会执行该方法");
    return prop;
  }
  const abbb = useMemo(() => atr(prop), [totalPosts]);
  return (
    <div>
      <div>数字是： {postsPerPage}</div>
      <div>字符串是： {abbb.totalPosts}</div>
      <div>方法在控制台输出- {paginate(totalPosts)}</div>
    </div>
  );
};
const flexStyle = (props: boolean): React.CSSProperties => ({
  display: "flex",
  justifyContent: props ? "space-around" : "space-between",
});

const AboutOne: React.FC = () => {
  const arr = [
    {
      id: 1,
      txt: "react部分类型定义",
      needDivder: false,
    },
    {
      id: 2,
      txt: "1.FC的参数传递、方法实现和使用、泛型使用和接口定义",
      needDivder: false,
    },
    {
      id: 3,
      txt:
        "2.CSSProperties类型的声明和调用（在JSX中表示样式对象的类型 - 用于css-in-js样式）",
      needDivder: false,
    },
    {
      id: 4,
      txt:
        "3.练习将参数结合扩展运算符赋给子组件的做法，详见TypeDemo.tsx组件写法",
      needDivder: false,
    },
    {
      id: 5,
      txt:
        "4.总体思想大概是子组件定义接收类型，父级组件传值时传递实例，如1号、2号、3号的不同实现",
      needDivder: false,
    },
    {
      id: 7,
      txt: "大概摸索了一下类型定义结合typescript的一些场景",
      needDivder: true,
      divderTxt: "come on let's go !",
    },
  ];

  let [cssSite, setCssSite] = useState(true);
  useEffect(() => {}, [cssSite]);
  const [oneObj, setOneObj] = useState({
    postsPerPage: 1,
    totalPosts: "乱七八糟",
    change: (e: string | number) => {
      console.log(e);
    },
  });
  return (
    <div>
      <MdEasyCom arr={arr}></MdEasyCom>
      <Card
        title={"1号 ----- FC的实现"}
        style={{ width: 500, margin: "20px 0" }}
      >
        <MyComponentFC
          postsPerPage={oneObj.postsPerPage}
          totalPosts={oneObj.totalPosts}
          paginate={oneObj.change}
        />
        改变totalPosts值
        <Button
          type="default"
          onClick={() => setOneObj({ ...oneObj, totalPosts: "gan" })}
        >
          点击
        </Button>
      </Card>

      <Card
        title={"2号 ----- CSSProperties属性："}
        style={{ width: 500, margin: "20px 0" }}
      >
        <h1>
          当前状态为: {cssSite ? "true" : "false"} 所以渲染 ---{" "}
          {cssSite ? "space-around" : "space-between"}属性
        </h1>
        <div style={flexStyle(cssSite)}>
          <p>
            Card content ：<Button>1</Button>
          </p>
          <p>
            Card content ：<Button>2</Button>
          </p>
        </div>
        <p>
          <Button
            type="default"
            onClick={() => {
              setCssSite((cssSite = !cssSite));
            }}
          >
            修改属性
          </Button>
        </p>
      </Card>
      <Card title="3号 ----- 传参给子组件的综合实现">
        <FCSpreadAttributes
          className={"acac"}
          style={{
            width: "100px",
            display: "flex",
            justifyContent: "space-around",
          }}
        >
          <Button>1</Button>
          <Button>2</Button>
        </FCSpreadAttributes>
      </Card>
    </div>
  );
};

export default AboutOne;
